import { Component } from "react"
import Title from "./title"
class App extends Component {
  render () {
    return (
      <div>
        <Title title='标题'>插槽标题
          <span>00</span>
        </Title>
        <h1>children属性</h1>
        <Son1>123
          <h1>hi,son1</h1>
        </Son1>
        <Son2>
          {(data) => { console.log(data) }}
        </Son2>
      </div>
    )
  }
}
/**
 * children属性
 * 类似vue中的插槽 <Son>插槽内容</Son> Son组件内部通过slot接收
 * 
 * 
 */
class Son2 extends Component {
  render () {
    console.log('类组件接受的插槽内容', this.props)
    return (
      <div>
        <h1>子组件1</h1>
        {/* 在button里面，拿到children，是个函数，传参进去 */}
        <button onClick={() => { this.props.children(1e6) }}>点我拿钱</button>
      </div>
    )
  }
}
function Son1 (props) {
  return (
    <div>
      子组件2
      <ul>
        <li>{props.children}</li>
      </ul>
    </div>
  )
}
// export default App
export default App